// 余额不足弹窗
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { request } from '@/api/request';
import useIsMobile from '@/hooks/isMoboile';
// import visaicon from '@/assets/images/become/visa.png';
// import wsd from '@/assets/images/become/wsd.png';
import { getDynamicFonts } from '@/utils/fontUtils';

// 价格配置（与subscriptions.tsx保持一致）
const PRICE_CONFIG = {
  monthly: {
    stripe_price_id: "price_1RiRamEHIcYxLscxdnQiqVg9",
    name: "100 tokens",
    price: "$6"
  },
  yearly: {
    stripe_price_id: "price_1RfxuLEHIcYxLscx49NXHhdU",
    name: "200 tokens",
    price: "$10"
  }
};


interface TokenInsufficientModalProps {
  show: boolean;
  onClose: () => void;
  currentBalance: number;
  required: number;
  serviceType: 'text' | 'voice' | 'img';
}

const TokenInsufficientModal: React.FC<TokenInsufficientModalProps> = ({
  show,
  onClose,
  currentBalance,
  required,
  serviceType
}) => {
  const { t, i18n } = useTranslation();
  const dynamicFonts = getDynamicFonts(i18n);
  const navigate = useNavigate();
  const isMobile = useIsMobile();
  const [selectedPlan, setSelectedPlan] = useState('monthly'); // 默认选中100代币
  const [isLoading, setIsLoading] = useState(false); // 支付loading状态
  // 新增：根据当前语言返回Token单位
  const getTokenUnit = () => (i18n.language === 'ja' ? 'ジェム' : 'Token');

  if (!show) return null;

  // 根据服务类型获取服务名称
  const getServiceName = () => {
    switch (serviceType) {
      case 'text':
        return t('tokenModal.services.text');
      case 'voice':
        return t('tokenModal.services.voice');
      case 'img':
        return t('tokenModal.services.image');
      default:
        return t('tokenModal.services.unknown');
    }
  };

 

  return (
    <div className={`fixed inset-0 z-50 flex items-center justify-center ${isMobile ? 'p-4' : 'p-8'}`}>
      {/* 背景遮罩 */}
      <div
        className="absolute inset-0 bg-black bg-opacity-50"
        onClick={onClose}
      />

      {/* 弹窗内容 */}
      <div className={`relative bg-gray-800 rounded-xl shadow-xl border border-gray-600 ${isMobile
        ? 'w-full max-w-sm max-h-[85vh] overflow-y-auto p-4 custom-scrollbar-thin'
        : 'max-w-lg w-full mx-4 p-6'
        }`}>
        {/* 关闭按钮 */}
        <button
          onClick={onClose}
          className={`absolute ${isMobile ? 'top-2 right-2' : 'top-4 right-4'} text-gray-400 hover:text-white transition-colors`}
        >
          <i className={`fas fa-times ${isMobile ? 'text-base' : 'text-lg'}`}></i>
        </button>

        {/* 图标 */}
        <div className={`flex justify-center ${isMobile ? 'mb-3' : 'mb-4'}`}>
          <div className={`${isMobile ? 'w-12 h-12' : 'w-16 h-16'} bg-red-500 bg-opacity-20 rounded-full flex items-center justify-center`}>
            <i className={`fas fa-coins text-red-500 ${isMobile ? 'text-xl' : 'text-2xl'}`}></i>
          </div>
        </div>

        {/* 标题 */}
        <h2 style={{ fontFamily: dynamicFonts.font3 }} className={`${isMobile ? 'text-lg' : 'text-xl'} font-semibold text-white text-center ${isMobile ? 'mb-3' : 'mb-4'}`}>
          {t('tokenModal.title')}
        </h2>

        {/* 内容 */}
        <div className={`${isMobile ? 'space-y-3' : 'space-y-4'} text-gray-300`}>
          <p style={{ fontFamily: dynamicFonts.font3 }} className={`text-center ${isMobile ? 'text-sm' : 'text-base'}`}>
            {t('tokenModal.description', {
              serviceName: getServiceName(),
              required,
              currentBalance
            })}
          </p>

          {/* 余额信息 */}
          <div style={{ fontFamily: dynamicFonts.font2 }} className={`bg-gray-700 rounded-lg ${isMobile ? 'p-3 space-y-1.5' : 'p-4 space-y-2'}`}>
            <div className={`flex justify-between ${isMobile ? 'text-sm' : 'text-base'}`}>
              <span>{t('tokenModal.currentBalance')}:</span>
              <span className="text-yellow-400 font-medium">{currentBalance} {getTokenUnit()}</span>
            </div>
            <div className={`flex justify-between ${isMobile ? 'text-sm' : 'text-base'}`}>
              <span>{t('tokenModal.required')}:</span>
              <span className="text-red-400 font-medium">{required} {getTokenUnit()}</span>
            </div>
            <div className={`flex justify-between border-t border-gray-600 ${isMobile ? 'pt-1.5 text-sm' : 'pt-2 text-base'}`}>
              <span>{t('tokenModal.shortage')}:</span>
              <span className="text-red-500 font-medium">{required - currentBalance} {getTokenUnit()}</span>
            </div>
          </div>

          {/* 提示信息 */}
          <p style={{ fontFamily: dynamicFonts.font3 }} className={`${isMobile ? 'text-xs' : 'text-sm'} text-gray-400 text-center`}>
            {t('tokenModal.hint')}
          </p>
        </div>

        {/* 底部按钮区域 */}
        <div style={{ fontFamily: dynamicFonts.font3 }} className={`flex space-x-3 ${isMobile ? 'mt-4' : 'mt-6'}`}>
          <button

            onClick={onClose}
            disabled={isLoading}
            className={`flex-1 ${isMobile ? 'px-3 py-2 text-sm' : 'px-4 py-2 text-base'} rounded-lg transition-colors text-white ${isLoading
              ? 'bg-gray-400 cursor-not-allowed'
              : 'bg-gray-600 hover:bg-gray-500'
              }`}
          >
            {t('tokenModal.cancel')}
          </button>
          <button
            onClick={() => {
              if (!isLoading) {
                onClose();
                navigate('/buygems');
              }
            }}
            disabled={isLoading}
            className={`flex-1 ${isMobile ? 'px-3 py-2 text-sm' : 'px-4 py-2 text-base'} rounded-lg transition-colors text-white ${isLoading
              ? 'bg-gray-400 cursor-not-allowed'
              : 'bg-gray-500 hover:bg-gray-400'
              }`}
          >
            {t('tokenModal.subscription')}
          </button>
        </div>
      </div>
    </div>
  );
};

export default TokenInsufficientModal; 